<template>  
  <div class="marquee-container">  
    <div class="marquee">  
      {{ text }}  
    </div>  
  </div>  
</template>  
  
<script>  
export default {  
  name: 'Marquee',  
  props: {  
    text: {  
      type: String,  
      required: true  
    }  
  }  
}  
</script>  
  
<style scoped>  
.marquee-container {  
  overflow: hidden;  
  white-space: nowrap;  
  box-sizing: border-box;  
  width: 100%;  
  height: 18px; 
  position: relative;  
}  
  
.marquee {  
  display: inline-block;  
  padding-left: 100%; 
  animation: marquee 10s linear infinite;  
  color:#ff5500;
  font-size:12px
}  
  
@keyframes marquee {  
  from {  
    transform: translateX(0);  
  }  
  to {  
    transform: translateX(-100%); 
  }  
}  
</style>